<template>
  <el-form :model="ruleForm" status-icon :rules="accountRules" ref="ruleFormRef">
    <div class="contactInf">
      <cpro-public title="联系方式" :show-stat="true">
        <template v-slot:content>
          <el-form-item prop="linkman" class="input">
            <el-input v-model="ruleForm.linkman" placeholder="请输入姓名" />
          </el-form-item>
          <el-form-item prop="phone" class="input">
            <el-input v-model="ruleForm.phone" placeholder="请输入手机/电话号码" />
          </el-form-item>
        </template>
      </cpro-public>
    </div>
  </el-form>
</template>

<script lang="ts" setup>
import cproPublic from '@/components/creat-projects/cpro-public.vue'
import { ElMessage } from 'element-plus'
import { reactive, ref, defineEmits, defineExpose } from 'vue'
import type { FormRules, ElForm, FormInstance } from 'element-plus'
const emit = defineEmits(['contactUpdate'])

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  linkman: '',
  phone: ''
})

//校验标准
const accountRules: FormRules = {
  linkman: [{ required: true, message: '姓名不能为空~', trigger: 'blur' }],
  phone: [
    { required: true, message: '电话号码不能为空~', trigger: 'blur' },
    {
      pattern: /0?(13|14|15|18|17)[0-9]{9}/,
      message: '请填写正确的手机/电话号码~',
      trigger: 'blur'
    }
  ]
}

const updateContact = (): Boolean => {
  if (!ruleForm.linkman) {
    ElMessage({
      showClose: true,
      message: '请正确填写联系方式！',
      type: 'error'
    })
    return false
  } else if (!ruleForm.phone) {
    ElMessage({
      showClose: true,
      message: '请正确填写联系方式！',
      type: 'error'
    })
    return false
  } else if (! /0?(13|14|15|18|17)[0-9]{9}/.test(ruleForm.phone)){
    ElMessage({
      showClose: true,
      message: '请正确填写联系方式！',
      type: 'error'
    })
    return false
  }
    emit('contactUpdate', ruleForm.linkman, ruleForm.phone)
  return true
}
defineExpose({ updateContact })
</script>

<style lang="less" scoped>
.contactInf {
  .input {
    flex: 1;
    margin: 0 8px 0 8px;
  }
}
.contactInf /deep/ input.el-input__inner {
  --el-input-inner-height: 40px;
}
</style>
